<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<div class="form-box">
			<h2 class="title">注册XMall账号</h2>
			<form>
				<div class="form-group">
					<input class="kk" type="text" placeholder="用户名" name="username" id="username">
				</div>
				<div class="form-group">
					<input class="kk" type="password" placeholder="密码" name="password" id="password">
				</div>
				<div class="form-group">
					<input class="kk" type="password" placeholder="确认密码" name="password2" id="password2">
				</div>
				<div class="form-group">
					<label style="display: flex; align-items: center;">
						<input type="checkbox">
						我已阅读并同意遵守&nbsp;
						<a href="#">法律声明</a>
						&nbsp;和&nbsp;
						<a href="#">隐私条款</a>
					</label>
				</div>
				<div class="form-group">
					<button id="btnReg" class="kk" type="button">注册</button>
				</div>
			</form>
			<div style="text-align: center;">
				已有账号，去&nbsp;<a href="#">登录</a>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script>
			$('#btnReg').on('click', function(){
				// 验证表单
				var valid = validateForm();
				if(!valid) {
					return;
				}
				// 异步提交数据到后端的处理程序
				$.ajax({
					url: 'http://localhost:8080/mall/register',
					type: 'POST',
					data: $('form').serialize(),
					dataType: 'json',
					success: function(result) {
						if(result.code == 0) {
							window.location.href = 'register-success.html';
						} else {
							alert(result.msg);
						}
					}
				});
			});
			
			
			function validateForm() {
				var valid = true;
				// 得到各个表单元素的值, 进行校验
				if( $('#username').val().trim().length == 0 ) {
					alert('用户名必填');
					valid = false;
				}
				if( $('#password').val().length == 0 ) {
					alert('密码必填');
					valid = false;
				}
				if( $('#password').val() != $('#password2').val() ) {
					alert('两个密码必须一致');
					valid = false;
				}
				return valid;
			}
		</script>
	</body>
</html>
